<template>
	<div>
		<canvas id="myCanvas" style="width: 100%;height: 200px" />
		<input type="file" name="" id="" value="" @change="getImg" ref="files"/>
		<input type="" name="" id="" value="" v-model="text"/>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				text: 'niniubi'
			}
		},
		methods: {
			getImg() {
				var reader = new FileReader();
		        var file = this.$refs.files.files[0];
		        var _this = this
		        reader.onload = function(e) {
		          	var img = new Image();   
				    img.src = e.target.result;
				    // 加载完成开始绘制
				    img.onload=function(){
				       //准备canvas环境 
				       var canvas=document.getElementById("myCanvas");
				       var ctx=canvas.getContext("2d");
				       ctx.clearRect(0, 0, canvas.width, canvas.height);
				       // 绘制图片
				       ctx.drawImage(img,0,0);
				       // 绘制水印
				       ctx.font="20px microsoft yahei";
				       ctx.fillStyle = "rgba(255,255,255,0.5)";
				       ctx.fillText(_this.text,50,50);
				    }
				    console.log(img.src)
		        };
		        reader.readAsDataURL(file);
			},
		},
		mounted() {
//			var img = new Image();   
//		    img.src = '/static/img/bg.1b8b289.png';
//		    // 加载完成开始绘制
//		    img.onload=function(){
//		       //准备canvas环境 
//		       var canvas=document.getElementById("myCanvas");
//		       var ctx=canvas.getContext("2d");
//		       // 绘制图片
//		       ctx.drawImage(img,0,0);
//		       // 绘制水印
//		       ctx.font="20px microsoft yahei";
//		       ctx.fillStyle = "rgba(255,255,255,0.5)";
//		       ctx.fillText("my images",100,100);
//		    }
		}
	}
</script>

<style>
</style>